<script lang='ts' setup>
import { appRef } from '@/models/app.ref';
import { NoteInfo, ThumbType } from '@/models/Note';
import router from '@/router';
import { noteService } from '@/services/note.service';
import { clipboardWriteText, searchToJson } from '@/utils/common.methods';
import { ref, defineProps, onMounted } from 'vue';
import PageNav from '@/components/PageNav.vue';
import { MessagePlugin } from 'tdesign-vue-next';

const note = ref({} as NoteInfo);
onMounted(() => {
  const { uid } = searchToJson<{ uid: string }>(location.href?.split('?')[1]);
  noteService.getOne(uid).then(res => {
    note.value = res;
  })
})

function onDelete(): void {
  noteService.delete(note.value.uid).then(() => router.back())
}

function onThumb(type: ThumbType): void {
  noteService.thumb(type, note.value.uid).then((res) => {
    const { type, count } = res;
    note.value.thumbtype = type;
    note.value.thumbup = count;
  })
}

const isMore = ref(false)
function onMore(): void {
  isMore.value = true;
}

const isShare = ref(false);
function onShare(): void {
  if (isShare.value) {
    MessagePlugin("success", "复制成功，快去分享吧");
  } else {
    noteService.share(note.value.uid).then(() => {
      note.value.share = ++note.value.share;
      isShare.value = true
      clipboardWriteText(location.href).then(() => {
        MessagePlugin("success", "复制成功，快去分享吧");
      })
    })
  }
}

</script>
<template>
  <PageNav :isMore="true" @more="onMore"></PageNav>
  <div class="drawer flex-c">
    <div class="card">
      <div class="box flex-c" :style="{ background: note.bgcolor }">
        <div class="flex user">
          <div class="left flex">
            <img v-if="note.user?.avatar" class="cover" :src="note.user?.avatar" alt="">
            <span class="name"> {{ note.user?.nick }} </span>
          </div>
          <div class="btns flex">
            <!-- <div class="btn flex">
              <t-icon name="add" /> 关注
            </div> -->
          </div>
        </div>
        <div class="text">{{ note.remark }}</div>
      </div>
      <div class="suspension-btn flex">
        <div class="btn flex" :class="{ 'activity': isShare }" @click="onShare">
          <t-icon name="share" size="21" />
          <span class="count" v-if="note.share > 0">{{ note.share }}</span>
        </div>
        <div class="btn flex" :class="{ 'activity': note.thumbtype == ThumbType.Up }"
          @click="onThumb(note.thumbtype === ThumbType.Up ? ThumbType.Default : ThumbType.Up)">
          <t-icon name="thumb-up" size="23" />
          <span class="count" v-if="note.thumbup > 0">{{ note.thumbup }}</span>
        </div>
        <div class="btn flex" :class="{ 'activity': note.thumbtype == ThumbType.Down }"
          @click="onThumb(note.thumbtype === ThumbType.Down ? ThumbType.Default : ThumbType.Down)">
          <t-icon name="thumb-down" size="23" />
        </div>

      </div>
    </div>

    <t-drawer placement="bottom" :footer="false" :header="false" v-model:visible="isMore">
      <div class="more group flex">
        <t-popconfirm content="确认删除吗" v-if="appRef.user?.data?.uid === note?.user?.uid" @confirm="onDelete">
          <div class="cell flex-c">
            <t-icon class="icon" name="delete" size="21" />
            <span>删除</span>
          </div>
        </t-popconfirm>
        <!-- <div class="cell flex-c" v-if="appRef.user?.data?.uid === note?.user?.uid">
          <t-icon class="icon" name="browse-off" size="21" />
          <span>设为私密</span>
        </div> -->
      </div>
    </t-drawer>


    <div class="bottom flex">
      <t-input label="" placeholder="添加一条友善的评论吧">
        <template #suffixIcon><t-icon name="check-circle" /></template>
      </t-input>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.drawer {
  width: 100%;
  max-width: 500px;
  height: 100%;
  flex: 1;
  justify-content: space-between;
  position: relative;
  padding: 20px;

  .card {
    width: 100%;
    padding-bottom: 50px;

    .suspension-btn {
      width: 100%;
      padding: 0 10px;
      justify-content: space-between;

      .btn {
        .count {
          margin-left: 10px;
        }
      }

      .activity {
        color: rgb(0, 153, 255);
      }
    }
  }
}

.box {
  width: 100%;
  padding: 17px;
  border-radius: 7px;
  box-shadow: 0 0 10px #00000048;
  margin-bottom: 20px;

  .text {
    width: 100%;
    line-height: 27px;
    font-size: 17px;
    margin-top: 17px;
    white-space: pre-line;
  }

  .user {
    width: 100%;
    color: #292929;
    font-size: 14px;
    justify-content: space-between;

    .cover {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 7px;
    }

    .btns {
      .btn {
        border-radius: 20px;
        background: #fff;
        padding: 3px 7px;
        font-size: 12px;
      }
    }
  }
}

.bottom {
  width: calc(100% - 20px);
  position: absolute;
  bottom: 20px;
}

.more {
  .cell {
    width: 70px;

    .icon {
      padding: 10px;
      background: #d4d4d4;
      color: #fff;
      box-sizing: content-box;
      border-radius: 50%;
      margin-bottom: 7px;
    }
  }
}
</style>